<template>
  <view class="content">
    <image class="logo" src="/static/logo.png"/>
    <view class="text-area">
      <text class="title">{{ title }}</text>
    </view>
    <view class="m-20rpx w-200px text-[#e6671dff] h-100px">
      使用unocss
    </view>
    <view class="text-red bg-amber">
      嘿嘿
    </view>
    <view class="p-200rpx">
      aLAjalkfalk
    </view>
    <!--    <image class="logo" src="/static/logo.png"/>-->
    <view class="text-red bg-amber">
      嘿嘿
    </view>
    <view class="text-red bg-amber">
      嘿嘿
    </view>
    <view class="text-red bg-amber">
      嘿嘿
    </view>
    <view class="text-red bg-amber">
      嘿嘿
    </view>


    <image class="logo" src="/static/logo.png"/>
    <view class="text-area">
      <text class="title">{{ title }}</text>
    </view>
    <view class="m-20rpx w-200px text-[#e6671dff] h-100px">
      使用unocss
    </view>
    <view class="text-red bg-amber">
      嘿嘿
    </view>
    <view class="p-200rpx">
      aLAjalkfalk
    </view>
    <!--    <image class="logo" src="/static/logo.png"/>-->
    <view class="text-red bg-amber">
      嘿嘿
    </view>
    <view class="text-red bg-amber">
      嘿嘿
    </view>
    <view class="text-red bg-amber">
      嘿嘿
    </view>
    <view class="text-red bg-amber" @click="add">
      嘿嘿
    </view>
  </view>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import {useCounterStore} from "@/stores/counter";
import {getUserInfo} from '@/api'
import {onShow} from "@dcloudio/uni-app";

const counterStore = useCounterStore()
onShow(() => {
  // add()
})

async function add() {
  const res = await getUserInfo()
}

const title = ref('Hello')
console.log(counterStore.userInfo)
</script>

<style lang="scss" scoped>
.content {
  --at-apply: "center flex-col";

  .logo {
    --at-apply: "h-[200rpx] w-[200rpx] mt-200rpx mb-50rpx mx-a";
  }

  .text-area {
    --at-apply: "flex justify-center";
  }

  .title {
    --at-apply: "text-[36rpx] text-#8f8f94";
  }
}
</style>
